@use "../../../assets/scss/functions" as *;
@use "../../../assets/scss/vars" as *;
@use "../../../assets/scss/mixins" as *;
@use "../../../assets/scss/comm.scss";

.px1 {
    border-bottom: 1px solid red;
}

.px05 {
    transform: scaleY(0.5);
    border-bottom: 1px solid red;
}

.px05-up-down {
    position: relative;

    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        transform: scaleY(0.5);
        border-bottom: 1px solid red;
    }

    &::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        transform: scaleY(0.5);
        border-bottom: 1px solid red;
    }
}

.px05-left-right {
    position: relative;
    height: px2vmin(100);
    line-height: px2vmin(100);

    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        transform: scaleX(0.5);
        border-left: 1px solid red;
    }

    &::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        transform: scaleX(0.5);
        border-right: 1px solid red;
    }
}

.px05-full {
    position: relative;

    &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid red;
        box-sizing: border-box;
        // 将长宽放大2倍
        width: 200%;
        height: 200%;
        // 再将整体缩小1半，即：又变回原来的大小
        transform: scale(0.5);
        // 将动效的起点设置为左上角，用于修正位置
        transform-origin: left top;
        border-radius: 8px;
    }
}

.px1-full {
    border: 1px solid red;
}

@mixin widthHeightScale($widthHeightPercent, $scale) {
    width: $widthHeightPercent;
    height: $widthHeightPercent;
    transform: scale($scale);
    // 将动效的起点设置为左上角，用于修正位置
    transform-origin: left top;
}

@mixin border1px($borderColor, $borderStyle, $borderRadius) {
    position: relative;

    &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px $borderStyle $borderColor;
        box-sizing: border-box;
        border-radius: $borderRadius;

        @media (min-resolution: 2dppx) {
            @include widthHeightScale(200%, 0.5);
        }

        @media (min-resolution: 3dppx) {
            @include widthHeightScale(300%, 0.3333333);
        }
    }

}

.use-px1-full {
    @include border1px(red, solid, 10px);
}